<script lang="ts" setup name='Header'>
const HeaderList= [
    { title: '首页', path: '/' },
    { title: '帮助', path: '/help' },
    { title: '关于我们', path: '/about' },
    { title: 'StudentTest', path: '/student' },
    { title: 'TeacherTest', path: '/teacher' },
]
</script>
<template>
    <header class="header">
        <a class="header-logo" href="#/" style="text-decoration: none; ">
            <h2 class="header-title">AIToEdu</h2>
            <img src="@/assets/logo.png" style="height: 40px">
        </a>

        <ul class="app-header-nav">
            <li class="home" v-for="item in HeaderList" >
                <RouterLink active-class="active" :to="`${item.path}`">
                    {{ item.title}}
                </RouterLink>
            </li>
        </ul>

        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>

        <div class="search-login">
            <div class="search-box">
                <el-input type="text" size="large" prefix-icon="Search" placeholder="搜索" class="el-input"></el-input>
            </div>
            <div class="header-buttons">
                <el-button size="large" @click="$router.push('/login')" >登录</el-button>
                <el-button size="large" @click="$router.push('/register')">注册</el-button>
            </div>
        </div>
    </header>
</template>
<style scoped>
body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: Arial, sans-serif;
    /* 设置整体字体 */
    box-sizing: border-box;
}
.app-header-nav {
  width: 820px;
  display: flex;
  padding-left: 40px;
  position: relative;
  z-index: 998;

  li {
    margin-right: 70px;
    width: 100px;
    text-align: center;

    a {
      font-size: 16px;
      line-height: 32px;
      height: 32px;
      display: inline-block;

      &:hover {
        font-size: 20px;
      }
    }

    .active {
        font-size: 20px;
    }
  }
}
.header {
    height: 3%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #409eff;
    /* 头部背景颜色 */
    padding: 30px 50px 20px 0;

    ul li{
        margin-right: 15px;
        text-decoration: none; /* Remove underline */
        font-weight: bold; /* Bold text */
        list-style: none;
    }

}

.header .header-logo {
    margin-left: 20px;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    line-height: 5px;
}

.header .header-logo .header-title {
    color: white;
    width: 100px;
}

a {

    color: white;
    /* 导航链接的字体颜色 */
    text-decoration: none;
    /* 去掉链接下划线 */
    font-size: 16px;
    /* 导航链接的字体大小 */
}

.header .search-login {
    display: flex;
    /* 搜索和登录部分用Flexbox布局 */
    align-items: center;
    /* 垂直居中对齐 */
    gap: 20px;
    /* 间距设置 */
}

.header .search-box {
    display: flex;
    /* 搜索框内部用Flexbox布局 */
    align-items: center;
    /* 垂直居中对齐 */
    padding: 5px 10px;
    /* 内边距 */
}

.header .search-box .el-input__inner {
    background-color: transparent;
}

.header .header-buttons {
    display: flex;
    gap: 20px;
    margin-right: 5%;
}

.header .header-buttons button {
    width: 80px;
    height: 36px;
    border-radius: 15px;
    color: #339AF0;
}
</style>
